<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <withdraw-search-form 
      :show-search="showSearch"
      :query-params="queryParams"
      @query="handleQuery"
      @reset="resetQuery"
    />

    <!-- 操作按钮 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Check"
          size="mini"
          :disabled="single"
          @click="handleBatchApprove"
        >批准</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Close"
          size="mini"
          :disabled="single"
          @click="handleBatchReject"
        >拒绝</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 提现列表表格 -->
    <withdraw-table
      :loading="loading"
      :withdraw-list="withdrawList"
      @selection-change="handleSelectionChange"
      @detail="handleDetail"
      @approve="handleApprove"
      @reject="handleReject"
      @payment="handlePayment"
    />
    
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 详情对话框 -->
    <withdraw-detail-dialog
      v-model="detailOpen"
      :detail="detail"
    />

    <!-- 审核对话框 -->
    <withdraw-audit-dialog
      v-model="auditOpen"
      :audit-title="auditTitle"
      :withdraw-id="currentWithdrawId"
      :withdraw-ids="ids"
      @success="handleAuditSuccess"
    />

    <!-- 打款对话框 -->
    <withdraw-payment-dialog
      v-model="paymentOpen"
      :withdraw-id="currentPaymentWithdrawId"
      @success="handlePaymentSuccess"
    />
  </div>
</template>

<script setup name="Withdraw">
import { ref, reactive, getCurrentInstance } from 'vue'
import { listWithdraw, getWithdraw } from "@/api/apartment/withdraw"
import WithdrawSearchForm from './components/WithdrawSearchForm.vue'
import WithdrawTable from './components/WithdrawTable.vue'
import WithdrawDetailDialog from './components/WithdrawDetailDialog.vue'
import WithdrawAuditDialog from './components/WithdrawAuditDialog.vue'
import WithdrawPaymentDialog from './components/WithdrawPaymentDialog.vue'

const { proxy } = getCurrentInstance()

const withdrawList = ref([])
const detailOpen = ref(false)
const auditOpen = ref(false)
const loading = ref(false)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const auditTitle = ref("")
const currentWithdrawId = ref(null)
const detail = ref({})
const paymentOpen = ref(false)
const currentPaymentWithdrawId = ref(null)

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  accountHolder: undefined,
  apartmentName: undefined,
  auditStatus: undefined,
  paymentStatus: undefined,
  startTime: undefined,
  endTime: undefined
})

/** 查询提现申请列表 */
const getList = () => {
  loading.value = true
  listWithdraw(queryParams).then(response => {
    withdrawList.value = response.rows
    total.value = response.total
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

/** 搜索按钮操作 */
const handleQuery = () => {
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  handleQuery()
}

/** 多选框选中数据 */
const handleSelectionChange = (selection) => {
  ids.value = selection.map(item => item.withdrawId)
  single.value = selection.length !== 1
  multiple.value = !selection.length
}

/** 查看详情 */
const handleDetail = (row) => {
  const withdrawId = row.withdrawId
  getWithdraw(withdrawId).then(response => {
    detail.value = response.data
    detailOpen.value = true
  })
}

/** 批准操作 */
const handleApprove = (row) => {
  auditTitle.value = "批准提现申请"
  currentWithdrawId.value = row.withdrawId
  auditOpen.value = true
}

/** 拒绝操作 */
const handleReject = (row) => {
  auditTitle.value = "拒绝提现申请"
  currentWithdrawId.value = row.withdrawId
  auditOpen.value = true
}

/** 批量批准操作 */
const handleBatchApprove = () => {
  auditTitle.value = "批准提现申请"
  currentWithdrawId.value = null
  auditOpen.value = true
}

/** 批量拒绝操作 */
const handleBatchReject = () => {
  auditTitle.value = "拒绝提现申请"
  currentWithdrawId.value = null
  auditOpen.value = true
}

/** 审核成功回调 */
const handleAuditSuccess = () => {
  getList()
}

/** 打款操作 */
const handlePayment = (row) => {
  currentPaymentWithdrawId.value = row.withdrawId
  paymentOpen.value = true
}

/** 打款成功回调 */
const handlePaymentSuccess = () => {
  getList()
}

// 页面加载时获取数据
getList()
</script>

<style scoped>
.mb8 {
  margin-bottom: 8px;
}
</style> 